import React, {useContext, useEffect, useState} from "react";
import './Vote.less';
import VoteMain from './VoteMain';
import VoteFooter from './VoteFooter';
import ThemeContext from "../../ThemeContext";

/*
*   redux 具体的代码编写顺序
*       + 1. 创建 store ，规划出 reducer (当中的业务处理逻辑可以后续不断完善)
*       + 2. 在入口中，基于上下文对象，把 store 放入到上下文中，需要用到 store的组件
*       + 3. 组件基于 store，完成 公共状态的获取和任务派发 store.getState  store.dispatch
*       + 4. 使用 store 的组件，必须加入使组件更新的方法  store.subscribe
*
* */

const Vote = function Vote() {
    const {store} = useContext(ThemeContext)
    // 获取容器中的公共状态
    let {supNum, oppNum} = store.getState().vote

    // 组件渲染完后，让组件更新的方法，放在 store 的事件池中
    // let [num, setNum] = useState(0)
    // const update = () => {
    //     setNum(num + 1)
    // }
    // useEffect(() => {
    //     // let unsubscribe=   store.subscribe(让组件更新的方法)
    //     //  + 把让组件更新的方法放在 store 事件池中
    //     //  + 返回的 unsubscribe 方法执行，可以把刚才放入事件池的方法移除掉
    //     //  +
    //     store.subscribe(update)
    // }, [num])
    let [_, setNum] = useState(0)
    useEffect(() => {
        store.subscribe(() => {
            setNum(+new Date()) // 每次修改更新
        })
    })

    return <div className="vote-box">
        <div className="header">
            <h2 className="title">React是很棒的前端框架</h2>
            <span className="num">{supNum + oppNum}</span>
        </div>
        <VoteMain/>
        <VoteFooter/>
    </div>;
};

export default Vote;
//
// "@reduxjs/toolkit": "^1.9.0",
// "redux": "^4.2.0",
// "redux-logger": "^3.0.6",
// "redux-promise": "^0.6.0",
// "redux-thunk": "^2.4.2",
// "react-redux": "^8.0.5",